<template>
  <div class="section">
    <!-- 开班轮播列表 -->
    <section class="section_box container">
      <span class="big_title flexcc">训练营开营排期表 · 火热报名中</span>
      <div class="content_box">
        <div class="top-case container">
          <p class="table-title flexjs">
            <span>期数</span>
            <span>训练营名称</span>
            <span>报名时间</span>
            <span>开营状态</span>
          </p>
          <div class="class-list-case">
            <div class="class-list">
              <div
                class="item flexjs"
                v-for="(item, index) in classList"
                v-bind:key="index"
              >
                <p>{{ item.sort }}</p>
                <p class="textControl">{{ item.name }}</p>
                <p>{{ item.date }}</p>
                <p class="hot-ico flexcc">{{ item.state }}</p>
                <p class="btn flexcc more">申请免费试听</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>

export default {
  name: 'section-box',
  components: {},
  // 接受父组件的值
  props: ["classList"],
  mounted() {
    // this.auto_play()
  },
  data() {
    return {
    }
  },
  methods: {
    // 轮播开课列表
    auto_play() {
      setInterval(function () { // 添加定时器，每1.5s进行转换
        document.getElementsByClassName("class-list")[0].animate({
          marginTop: "-49px" //每次移动的距离
        }, 3000, function () {
          this.css({ // 动画运动的时间
            marginTop: "0rem"
          }).find(".item:first").appendTo(this);
        });
      }, 3000)
    }
  },
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
.section {
  .section_box {
    padding-bottom: 90px;

    .content_box {
      margin-top: 48px;
      .top-case {
        width: 860px;
        height: 209px;
        background: #e8f3ff;
        border-radius: 12px;

        .table-title {
          padding: 10px 210px 10px 26px;
          width: 860px;
          height: 44px;
          background: #6aa1ff;
          border-radius: 12px 12px 0px 0px;
          font-weight: bold;
          font-size: 18px;
          line-height: 22px;
          color: #ffffff;

          span:nth-child(2) {
            width: 280px;
          }
        }

        .class-list-case {
          overflow: hidden;
          margin: 16px;
          height: 132px;

          .class-list {
            padding: 0 8px;
            .item {
              .hot-ico::after {
                content: "";
                margin-left: 5px;
                width: 16px;
                height: 16px;
                background: url(/imgs/hot-ico.png) no-repeat center;
                background-size: 100%;
              }

              p {
                font-weight: 400;
                font-size: 16px;
                line-height: 21px;
                color: #1d2129;
              }

              p:nth-of-type(2) {
                width: 280px;
              }

              .btn {
                width: 120px;
                height: 33px;
                background: linear-gradient(
                  147.14deg,
                  #ff8800 6.95%,
                  #e63535 93.05%
                );
                border-radius: 50px;
                font-size: 16px;
                line-height: 33px;
                color: #ffffff;
              }
            }

            .item:nth-of-type(n + 2) {
              margin-top: 16px;
            }
          }
        }
      }

      .class-list-case {
        overflow: hidden;
        margin: 16px;
        height: 132px;

        .class-list {
          padding: 0 8px;

          .item {
            .hot-ico::after {
              content: "";
              margin-left: 5px;
              width: 16px;
              height: 16px;
              background: url(/img/hot-ico.png) no-repeat center;
              background-size: 100%;
            }

            p {
              font-weight: 400;
              font-size: 16px;
              line-height: 21px;
              color: #1d2129;
            }

            p:nth-of-type(2) {
              width: 280px;
            }

            .btn {
              width: 120px;
              height: 33px;
              background: linear-gradient(
                147.14deg,
                #ff8800 6.95%,
                #e63535 93.05%
              );
              border-radius: 50px;
              font-size: 16px;
              line-height: 21px;
              color: #ffffff;
            }
          }

          .item:nth-of-type(n + 2) {
            margin-top: 16px;
          }
        }
      }
    }
  }
}
</style>